<template>
    <div>
        <div class="write">
            <el-button type="success" size="small" round icon="el-icon-edit">写题解</el-button>
        </div>
        <div class="answer-item" v-for="item, index in 10" :key="index">
            <div class="user">
                <div class="user-l">
                    <el-avatar src="http://www.lijunxi.site:1234/static/avatar/123456/qq.jpg.png" :size="40"></el-avatar>
                    <div class="nickname">
                        <span>Jixer</span>
                    </div>
                </div>
                <div class="time">
                    <span>发布于2021-12-31 12:30</span>
                </div>
            </div>
            <div class="title">
                <el-link :underline="false" @click="toPage('/problem/answer/1')">阿四打撒了</el-link>
            </div>
            <div class="content">
                <span>阿斯顿撒旦撒旦爱上了打开阿萨d;laks;ldas;kd;alskd;laslkda;lsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨dlsdksadas上了打开阿萨d;laks;ldas;kd;alskd;laslkda;lsdksadas上了打开阿萨d;laks;ldas;kd;alskd;laslkda;lsdksadas上了打开阿萨d;laks;ldas;kd;alskd;laslkda;lsdksadas上了打开阿萨d;laks;ldas;kd;alskd;laslkda;lsdksadas</span>
            </div>
            <div class="bottom-info">
                <span><i class="el-icon-caret-top"></i>12</span>
                <span><i class="el-icon-s-comment"></i>23</span>
            </div>
            <el-divider></el-divider>
        </div>
    </div>
</template>

<script>
export default {
    name: "problem-answer",
    methods: {
        toPage(url) {
            this.$router.push(url)
        }
    }
}
</script>

<style scoped>
.user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.user-l {
    display: flex;
    align-items: center;
    height: 50px;
}

.nickname {
    padding: 0 15px;
    color: #18191b;
}

.content {
    font-size: 14px;
    margin: 10px 0 10px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
}

.bottom-info {
    text-align: right;
    font-size: 14px;
    color: gray;
}

.bottom-info span {
    margin-left: 20px;
}

.bottom-info i {
    margin-right: 5px;
    font-size: 15px;
}

.title a {
    font-size: 18px;
    font-weight: 800;
}

.time {
    font-size: 14px;
}

.write{
    text-align: right;
    background-color: rgb(245, 245, 245);
    border-radius: 10px;
    padding: 7px;
    margin-bottom: 10px;
    border-left: solid 8px #409EFF;
}
</style>